// 控制顶部菜单栏 返回顶部按钮
const headerEl = document.querySelector("header");
const scorllToTop = document.querySelector('.scorllToTop');
window.addEventListener('scroll',function(){
  // 获取菜单栏高度
  let height = headerEl.getBoundingClientRect().height;
  if(window.pageYOffset - height >800){
    if(!headerEl.classList.contains('sticky')){
      headerEl.classList.add('sticky');
    }
  }else{
    headerEl.classList.remove('sticky');
  }

  if(window.pageYOffset>2000){
    scorllToTop.style.display = 'block';
  }else{
    scorllToTop.style.display = 'none'
  }
})
// 手机端菜单按钮切换
const burgerEl = document.querySelector('.burger');
burgerEl.addEventListener('click',()=>{
headerEl.classList.toggle('open')
})


const glide = new Glide('.glide');
const captions = document.querySelectorAll(".slide_caption");
glide.on(["mount.after","run.after"],() => {
  const cap = captions[glide.index];
  // 动画设置
  anime({
    targets:cap.children,
    opacity:[0,1],
    duration:400,
    easing:"linear",
    delay:anime.stagger(400,{star:300}),
    translateY:[anime.stagger([40,10]),0]
  });
});
glide.on("run.before",()=>{
  document.querySelectorAll(".slide_caption > *").forEach(el =>{
    el.style.opacity = 0;
  });
});
glide.mount();


const iso = new Isotope( ".cases", {
  layoutMode: 'fitRows',
  itemSelector: '.case-item'
  
});

const filterbtn = document.querySelector(".filter-btn");
filterbtn.addEventListener('click',e => {
  let event = e || window.event;
  let target = e.target;
  const filterOption = target.getAttribute("data-filter");
  if(filterOption){
    document.querySelectorAll(".btn.active").forEach(btn => btn.classList.remove("active"));
    target.classList.add("active");

    // 对图片进行筛选
    iso.arrange({filter:filterOption});
  }
})


const staggeringOption = {
  delay:300,
  distace:"50px",
  duration:500,
  easing:"ease-in-out",
  origin:"botttom"
}
// 滚动依次出现元素
ScrollReveal().reveal(".feature",{...staggeringOption,interval:350});
ScrollReveal().reveal(".service-item",{...staggeringOption,interval:350});

const dataSectionEl = document.querySelector(".data");
ScrollReveal().reveal(".data",{
  beforeReveal:()=>{
    anime({
      targets:'.data-piece .num',
      innerHTML:el =>{
        return[0,el.innerHTML];
      },
      duration:2000,
      round:1,
      easing:"easeInExpo"
    });
    dataSectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect().bottom /5}px)`;
  }
});

window.addEventListener("scroll",()=>{
  const bottom = dataSectionEl.getBoundingClientRect().bottom;
  const top = dataSectionEl.getBoundingClientRect().top;

  if(bottom >= 0 && top <= window.innerHeight){
    dataSectionEl.style.backgroundPosition = `center calc(50% - ${bottom/5}px)`
  }
})

const scroll = new SmoothScroll('nav a[href*="#"],.scrollToTop a[href*="#"]',{
  header:"header",
  offset:80
})
document.addEventListener('scrollStart',()=>{
  if(headerEl.classList.contains('open')){
    headerEl.classList.remove('open');
  }
})

const exploreBtnEls = document.querySelectorAll(".explore_btn");
exploreBtnEls.forEach(exploreBtnEl => {
  exploreBtnEl.addEventListener("click",()=>{
    scroll.animateScroll(document.querySelector("#about"))
  })
})
